<template>
  <button :class="['dpro-btn', { [typeClass]: !!typeClass }]" :disabled="disabled" v-on="$listeners"><slot></slot></button>
</template>

<script>
// 按钮支撑的类型
const TYPES = ['default', 'primary'];
export default {
  name: 'DproButton',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 按钮呈现类型：default（默认，hover时背景色为主题色）、primary（背景色始终为主题色）
     */
    type: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    typeClass() {
      if(!TYPES.includes(this.type) || this.type === 'default') return '';
      return `dpro-btn-${this.type}`;
    }
  }
}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);
.dpro-btn {
  display: inline-block;
  line-height: 32px;
  outline: none;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  user-select: none;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #ffffff;
  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  &:not([disabled]):active,
  &:not([disabled]):hover {
    background-color: @primary-color;
    color: #ffffff;
  }
}
.dpro-btn-primary {
  background-color: @primary-color;
}
</style>